<template>
  <div id='SaleChart'  class='SaleChart'>
      <el-card shadow="always" :body-style="{ padding: '10px' }">
       <div class="date-picker">
                <span class="set-time" @click="setDay">本天</span>
                <span class="set-time" @click="setWeek">本周</span>
                <span class="set-time" @click="setMonth">本月</span>
                <span class="set-time" @click="setYear">本年</span>
               <el-date-picker
                v-model="dateValue"
                type="daterange"
                size="small"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions" >
                </el-date-picker> </div>
          <el-tabs v-model="activeName"   tab-position="top" @tab-click="tabClick"   >
                
             
                  <!-- @tab-click="" :key="item.key"
                      :label="item.label" -->
                  <el-tab-pane  label="销售额" name="销售额">
                    <el-row  >
                        <el-col :span="18" >
                              <VChart :options="saleOption" style="height:420px"></VChart>
                        </el-col>
                        <el-col :span="6" >
                           <el-row>
                               <el-col   :offset="1">
                                    <h2 class="saleTop">门店销售额排名TOP10</h2>
                               </el-col>
                               
                           </el-row>
                            <el-row >
                                <el-col :span="4"   :offset="4"  ><span class="number top1" >1</span></el-col>
                                <el-col :span="10" ><span class="store-name">肯德基</span></el-col>
                                <el-col :span="6"  ><span class="sales">896,276</span></el-col>
                            </el-row>
                            <el-row >
                                <el-col :span="4"   :offset="4"  > <span class="number top2" >2</span></el-col>
                                <el-col :span="10" > <span class="store-name">麦当劳</span></el-col>
                                <el-col :span="6"  ><span class="sales">866,403</span> </el-col>
                            </el-row>
                            <el-row >
                                <el-col :span="4"   :offset="4"  > <span class="number top3" >3</span></el-col>
                                <el-col :span="10" ><span class="store-name">海底捞</span></el-col>
                                <el-col :span="6"  ><span class="sales">836,286</span> </el-col>
                            </el-row>
                            <el-row >
                                <el-col :span="4"   :offset="4"  > <span class="number" >4</span></el-col>
                                <el-col :span="10" ><span class="store-name">小绵羊</span></el-col>
                                <el-col :span="6"  ><span class="sales">795,296</span> </el-col>
                            </el-row>
                            <el-row >
                                <el-col :span="4"   :offset="4"  > <span class="number" >5</span></el-col>
                                <el-col :span="10" ><span class="store-name">汉堡王</span></el-col>
                                <el-col :span="6"  > <span class="sales">776,256</span> </el-col>
                            </el-row>
                            <el-row >
                                <el-col :span="4"   :offset="4"  > <span class="number" >6</span></el-col>
                                <el-col :span="10" > <span class="store-name">必胜客</span></el-col>
                                <el-col :span="6"  > <span class="sales">746,296</span></el-col>
                            </el-row>
                            <el-row >
                                <el-col :span="4"   :offset="4"  ><span class="number" >7</span></el-col>
                                <el-col :span="10" ><span class="store-name">食悦阁</span></el-col>
                                <el-col :span="6"  > <span class="sales">706,216</span></el-col>
                            </el-row>
                            <el-row >
                                <el-col :span="4"   :offset="4"  ><span class="number" >8</span></el-col>
                                <el-col :span="10" ><span class="store-name">望湘楼</span></el-col>
                                <el-col :span="6"  > <span class="sales">656,216</span></el-col>
                            </el-row>
                            <el-row >
                                <el-col :span="4"   :offset="4"  ><span class="number" >9</span></el-col>
                                <el-col :span="10" ><span class="store-name">真功夫</span></el-col>
                                <el-col :span="6"  > <span class="sales">606216</span></el-col>
                            </el-row>
                            <el-row >
                                <el-col :span="4"   :offset="4"  ><span class="number" >10</span></el-col>
                                <el-col :span="10" ><span class="store-name">杨国福</span></el-col>
                                <el-col :span="6"  > <span class="sales">586,216</span></el-col>
                            </el-row>
                             </ul>
                        </el-col>
                    </el-row>
                    
                  </el-tab-pane>
                  <el-tab-pane  label="访问量" name="访问量">
                        <el-col :span="18" >
                              <VChart :options="visitOption" style="height:400px;width:1038px"></VChart>
                        </el-col>
                        <el-col :span="6" >
                           <el-row>
                               <el-col   :offset="1">
                                    <h2 class="saleTop">门店销售额排名TOP10</h2>
                               </el-col>
                               
                           </el-row>
                            <el-row >
                                <el-col :span="4"   :offset="4"  ><span class="number top1" >1</span></el-col>
                                <el-col :span="10" ><span class="store-name">肯德基</span></el-col>
                                <el-col :span="6"  ><span class="sales">896,266</span></el-col>
                            </el-row>
                            <el-row >
                                <el-col :span="4"   :offset="4"  > <span class="number top2" >2</span></el-col>
                                <el-col :span="10" > <span class="store-name">必胜客</span></el-col>
                                <el-col :span="6"  ><span class="sales">866,463</span> </el-col>
                            </el-row>
                            <el-row >
                                <el-col :span="4"   :offset="4"  > <span class="number top3" >3</span></el-col>
                                <el-col :span="10" ><span class="store-name">海底捞</span></el-col>
                                <el-col :span="6"  ><span class="sales">836,286</span> </el-col>
                            </el-row>
                            <el-row >
                                <el-col :span="4"   :offset="4"  > <span class="number" >4</span></el-col>
                                <el-col :span="10" ><span class="store-name">汉堡王</span></el-col>
                                <el-col :span="6"  ><span class="sales">795,297</span> </el-col>
                            </el-row>
                            <el-row >
                                <el-col :span="4"   :offset="4"  > <span class="number" >5</span></el-col>
                                <el-col :span="10" ><span class="store-name">小绵羊</span></el-col>
                                <el-col :span="6"  > <span class="sales">776,259</span> </el-col>
                            </el-row>
                            <el-row >
                                <el-col :span="4"   :offset="4"  > <span class="number" >6</span></el-col>
                                <el-col :span="10" > <span class="store-name">麦当劳</span></el-col>
                                <el-col :span="6"  > <span class="sales">746,296</span></el-col>
                            </el-row>
                            <el-row >
                                <el-col :span="4"   :offset="4"  ><span class="number" >7</span></el-col>
                                <el-col :span="10" ><span class="store-name">食悦阁</span></el-col>
                                <el-col :span="6"  > <span class="sales">706,215</span></el-col>
                            </el-row>
                            <el-row >
                                <el-col :span="4"   :offset="4"  ><span class="number" >8</span></el-col>
                                <el-col :span="10" ><span class="store-name">望湘楼</span></el-col>
                                <el-col :span="6"  > <span class="sales">656,216</span></el-col>
                            </el-row>
                            <el-row >
                                <el-col :span="4"   :offset="4"  ><span class="number" >9</span></el-col>
                                <el-col :span="10" ><span class="store-name">真功夫</span></el-col>
                                <el-col :span="6"  > <span class="sales">626216</span></el-col>
                            </el-row>
                            <el-row >
                                <el-col :span="4"   :offset="4"  ><span class="number" >10</span></el-col>
                                <el-col :span="10" ><span class="store-name">杨国福</span></el-col>
                                <el-col :span="6"  > <span class="sales">53,216</span></el-col>
                            </el-row>
                             </ul>
                        </el-col>
                  </el-tab-pane>
              </el-tabs>
      </el-card>
      
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  name: 'SaleChart',
  props: { // 父传子
  },
  data () {
    return {
        dateValue:[],
        activeName:"销售额",
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        saleOption:{
              tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'shadow'
                    }
                },
                grid: {
                    left: '0',
                    right: '0',
                    bottom: '0',
                    containLabel: true
                },
                xAxis: [
                    {
                    type: 'category',
                    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月',"八月","九月","十月","十一月","十二月" ],
                    axisTick: {
                        alignWithLabel: true
                    }
                    }
                ],
                yAxis: [
                    {
                    type: 'value'
                    }
                ],
                series: [
                    {
                    name: 'Direct',
                    type: 'bar',
                    barWidth: '60%',
                    data: [70, 59, 200, 334, 390, 330, 220,159,389,169,159,349,289]
                    }
                ]
        },
        
        visitOption:{
              tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'shadow'
                    }
                },
                grid: {
                    left: '0',
                    right: '0',
                    bottom: '0',
                    containLabel: true
                },
                xAxis: [
                    {
                    type: 'category',
                    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月',"八月","九月","十月","十一月","十二月" ],
                    axisTick: {
                        alignWithLabel: true
                    }
                    }
                ],
                yAxis: [
                    {
                    type: 'value'
                    }
                ],
                series: [
                    {
                    name: 'Direct',
                    type: 'bar',
                    barWidth: '60%',
                    data: [90, 72, 200, 394, 330, 330, 290,199,339,269,189,399,269]
                    }
                ]
        },

    }
  },
  created () { // 实例被创建钩子

    },
  computed: { // 计算属性

    },
  components: { // 组件引用
     VChart: ()=> import("./VChart.vue"),
    },
  methods: { // 方法
        tabClick(val){
            
        },
        setDay(){
             const day = dayjs().format('YYYY-MM-DD')
             this.dateValue = [day,day]
        },
        setWeek(){
            const start = dayjs().day(1).format('YYYY-MM-DD')
            const end = dayjs().day(7).format('YYYY-MM-DD')
            this.dateValue = [start,end]
        },
        setMonth(){
            const start =  dayjs().startOf('month').format('YYYY-MM-DD')
            const end = dayjs().endOf('month').format('YYYY-MM-DD')
            this.dateValue = [start,end]
        },
        setYear(){
            const start =  dayjs().startOf('year').format('YYYY-MM-DD')
            const end = dayjs().endOf('year').format('YYYY-MM-DD')
            this.dateValue = [start,end]
        },

    },
  mounted () { // Dom挂载钩子

    },
  watch: { // 监测变化

    }
}
</script>
<style scoped lang='scss'>
 .SaleChart{
     .el-card{
         position:relative;
         &::v-deep .el-card__header{
            padding:0 !important;
            border:none;
       }
    .date-picker{
         position: absolute;
         right:8px;
         top:8px;
         z-index: 999;
         .set-time{
             padding:5px;
             margin-right:8px;
             border-radius: 5px;
             background: #f5f5f5;
             color:#70a1ff;
             cursor: pointer;
         }
     }
     }
  
     .saleTop{
         text-align: center;
     }
     .el-row{
         height:35px;
         line-height: 35px;
         .number {
             display: inline-block;
             width: 30px;
             height:30px;
             background: #dfe4ea;
             border-radius: 50%;
             text-align: center;
             line-height: 30px;
             color:#fff;
         }
         .top1{
             background: #ff7979;
             
         }
         .top2{
             background: #f9ca24;
         }
         .top3{
             background: #7ed6df;
         }
         .el-row:nth-child(-n+4) .store-name{
             font-weight: 550;
         }
         .el-col{
             .sales{
             font-family:  Consolas;
          }

         }
     }
 }
</style>